<!--修改密码-->
<template>
  <div class="edit-password">
    <div class="form">
      <h3>登录密码重置</h3>
      <a-steps class="steps" :current="currentTab">
        <a-step title="填写验证信息" />
        <a-step title="登录密码重置" />
        <a-step title="重置完成" />
      </a-steps>
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        v-if="isShowForm">
        <a-form-item label="用户名" >
          <a-input disabled placeholder="请输入用户名" v-decorator="[ 'U_Name', {rules: [{ required: true, message: '请输入用户名!' }]} ]" />
        </a-form-item>
        <a-form-item label="原密码">
          <a-input-password :disabled="isDisabled" placeholder="请输入原密码" v-decorator="['U_PWD', {rules: [{ required: true, message: '请输入原密码!' }]} ]" />
        </a-form-item>
        <a-form-item label="新密码" v-if="isShowPassword">
          <a-input-password placeholder="请输入新密码" v-decorator="['U_PWD2', {rules: [{ required: true, message: '请输入新密码!' }]} ]" />
        </a-form-item>
        <a-form-item label="确认新密码" v-if="isShowPassword">
          <a-input-password placeholder="请再次输入新密码" v-decorator="['U_PWD3', {rules: [{ required: true, message: '请再次输入新密码!' }]} ]" />
        </a-form-item>
        <a-form-item style="text-align:center">
          <a-button type="primary" @click="nextStep">下一步</a-button>
        </a-form-item>
      </a-form>
      <a-result title="密码修改成功!" v-else>
        <template #icon>
          <a-icon type="smile" theme="twoTone" />
        </template>
        <template #extra>
          <a-button type="primary" @click="loginOut">重新登录</a-button>
        </template>
      </a-result>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditPassword',
  components: {},
  data () {
    return {
      currentTab: 0,
      isShowPassword: false,
      isShowForm: true,
      isDisabled: false
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    nextStep () {
      this.currentTab++
      if (this.currentTab === 1) {
        this.isShowPassword = true
        this.isDisabled = true
      } else if (this.currentTab === 2) {
        this.isShowForm = false
      }
    },
    // 退出系统
    loginOut () {
      this.$confirm({
        title: '提示',
        content: '真的要注销登录吗?',
        okText: '确认',
        cancelText: '取消',
        onOk () {
          sessionStorage.removeItem('ACCESS_TOKEN')
          window.location.reload()
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.edit-password {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  display: flex;
  .form {
    width: 980px;
    height: 520px;
    background: #FFF;
    margin: auto;
    h3 {
      line-height: 90px;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.85);
      text-align: center;
    }
    .steps {
      padding: 0 100px;
    }
    .ant-form {
      padding: 60px 240px 0;
      .ant-form-item {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
